<template>
    <div class="person">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        <button @click="changeFullName">将全名改为lisi</button>
        全名：<span>{{ fullName0 }}</span><br>
        全名：<span>{{ fullName0 }}</span><br>
        全名：<span>{{ fullName0 }}</span><br>
        全名：<span>{{ fullName0 }}</span><br>
        全名：<span>{{ fullName0 }}</span><br>
        全名：<span>{{ fullName0 }}</span><br>
        全名：<span>{{ fullName0 }}</span>
    </div>
</template>

<script lang="ts" setup name="Person">
import { ref, computed } from 'vue'

let firstName = ref('zhang')
let lastName = ref('san')

// function fullName2() {
//     console.log(6);
//     return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value

// }

// let fullName = computed(() => { // 这么定义的 fullName 是一个计算属性，且是只读的
//     console.log(6);
//     return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value
// })

let fullName0 = computed({ // 这么定义的 fullName 是一个计算属性，可读可写
    get() {
        return firstName.value.slice(0, 1).toUpperCase() + firstName.value.slice(1) + lastName.value
    },
    set(val) {
        const [str1, str2] = val.split('-')
        firstName.value = str1
        lastName.value = str2
    }
})

function changeFullName() {
    fullName0.value = 'li-si'

}
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>
